<template>
  <div class="img" :style="note">
    <div
      style="
        width: 350px;
        height: 900px;
        background-color: rgba(0, 0, 0, 0.01);
        margin: 0px auto;
        text-align: center;
        position: relative;
      "
    >
      <div
        style="
          width: 350px;
          height: 700px;
          background-color: rgba(0, 0, 0, 0.6);
          text-align: center;
          position: absolute;
          margin-top: 100px;
        "
      >
        <p
          style="
            font-size: 28px;
            font-family: '楷体';
            padding-top: 20px;
            color: slategray;
          "
        >
          公司注册
        </p>
        <hr style="width: 90%; height: 0.01px" />
        <div style="margin-top: 20px">
          <!-- 头像上传 -->
          <div style="width: 100%">
            <el-upload
              action="http://localhost:8092/upload/singlefile"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">上传公司头像</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>

          <div style="margin-top: 40px">
            <el-input
              v-model="InputName"
              placeholder="请输入你公司的名称"
              style="width: 70%"
            ></el-input>
            <el-input
              v-model="InputNo"
              placeholder="请输入公司的编号"
              style="width: 70%; margin-top: 30px"
            ></el-input>
            <el-input
              v-model="CompanyUser"
              placeholder="请输入该公司的负责人"
              style="width: 70%; margin-top: 30px"
            ></el-input>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入公司情况"
              v-model="textarea"
              style="width: 70%; margin-top: 30px"
            ></el-input>
          </div>

          <div style="width: 100%">
            <form style="width: 100%">
              <p
                style="
                  width: 100%;
                  margin-left: 50px;
                  text-align: left;
                  color: slategray;
                "
              >
                请将公司的详细信息以文档方式上传
              </p>
              <input
                type="file"
                @change="getFilee($event)"
                style="color: slategray"
              />
              <button
                class="button button-primary button-pill button-small"
                @click="submite($event)"
              >
                提交
              </button>
            </form>
          </div>

          <div style="width: 100%">
            <el-button
              plain
              style="margin-top: 20px; width: 100px"
              size="small"
              @click="register()"
              >立即注册</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [{name:'', url:''}], //上传头像

      note: {
        backgroundImage: "url(" + require("../assets/img/starrr.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "1890px 1500px",
      },
      id: "",
      InputName: "",
      InputNo: "",
      CompanyUser: "",
      textarea: "",
      filee: "",
      states: 0, //逻辑状态，表示提交后处于审批中
    };
  },
  methods: {
    // 头像上传数目限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    getFilee: function (event) {
      this.filee = event.target.files[0];
      console.log(this.filee);
    },

    //第二个文件上传的提交
    submite: function (event) {
      console.log("url", this.fileList);
      var _this = this;
      //阻止元素发生默认的行为
      event.preventDefault();
      let formData = new FormData();
      formData.append("file", this.filee);
      axios
        .post("http://localhost:8092/upload/singlefile", formData)
        .then(function (response) {
          alert(response.data);
          console.log(response);
          var a = response.data;
          _this.filee = a;
        })
        .catch(function (error) {
          alert("上传失败");
          console.log(error);
          //window.location.reload();
        });
    },

    //注册功能
    register() {
      if (
        this.InputName == "" ||
        this.InputNo == "" ||
        this.CompanyUser == "" ||
        this.textarea == "" ||
        this.fileList.length == 0 ||
        this.filee == ""
      ) {
        this.$notify({
          title: "警告",
          message: "请填写注册信息",
          type: "warning",
          duration: 2000,
        });
      } else {
        var user = JSON.parse(window.sessionStorage.getItem("user"));
        this.id = user.id;
        axios
          .post("http://localhost:88/provider/user/companyApply", {
            idd: this.id,
            companyName: this.InputName,
            companyNo: this.InputNo,
            leaderName: this.CompanyUser,
            introduce: this.textarea,
            photoUrl: this.fileList.url,
            applyDocUrl: this.filee,
            states: this.states,
          })
          .then((response) => {
            if ((response.data.states = 800)) {
              this.$notify({
                title: "成功",
                message: "注册成功",
                type: "success",
                duration: 1000,
              });
              //这里消息中心处应该要个标签提示

              this.$router.replace("/Index");
            } else {
              this.$notify.error({
                title: "错误",
                message: response.data.message,
                type: "warning",
                duration: 0,
              });
            }
          })
          .catch((response) => {});
      }
    },
  },
};
</script>

<style scoped>
</style>
